<template>
	<!-- 文章管理 / 各栏目列表-->
	<view class="an-sysarticle ">
		<!-- 自定义导航栏 -->
		<uni-nav-bar :fixed="true" color="#333333" background-color="#FFFFFF" leftIcon='back' leftText='返回' anRightIcon='icon-shaixuan' @click-left="back" @click-right="selectState">
			<view class="input-view">
				<uni-icons type="search" size="22" color="#666666" />
				<input confirm-type="search" v-model.trim="postData.title" class="input" type="text" placeholder="输入搜索关键词" @confirm="search" />
			</view>
		</uni-nav-bar>
		<!-- 顶部选项卡 -->
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto" v-if="isAll">
		    <view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
		        <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
		    </view>
		</scroll-view>
		
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in list" :key="key" @longtap="clickList(value)" @tap="gotoInfo(value)">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" mode="aspectFill" :src="value.thumbnail" v-if="!isEmpty(value.thumbnail)"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{value.title}}</view>
						<view class="uni-media-list-text-bottom">
							<text>{{value.author}}</text>
							<text>{{value.updata_time | timeFilter}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多组件 -->
		<uni-load-more :loadingType="loadingType"></uni-load-more>
		
		
		<uni-popup ref="popup"  type="bottom"  >
			<view>
				<view class="uni-list">
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">发布</view>
						<switch :checked="activeItem.release_status === 1" @change="clickStatus"/>
					</view>
					<view class="uni-list-cell uni-list-cell-pd">
						<view class="uni-list-cell-db">置顶</view>
						<switch :checked="activeItem.is_top === 1" @change="clickTop"/>
					</view>
				</view>
				<view class="uni-padding-wrap uni-common-mt">
					<button type="warn" @tap="deleteInfo">删除</button>
				</view>
			</view>
		</uni-popup>
		
		<!-- 筛选弹框组件 -->
		<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPagination from '@/components/uni-pagination.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {isEmpty} from '@/common/graceChecker.js'
	import {mapState} from 'vuex'
	export default {
		components: {
			uniPopup,
			uniPagination,
			uniNavBar,
			mpvuePicker,
			uniIcons,
			uniLoadMore
		},
		data() {
			return {
				isAll: true, 	//是否显示全部栏目  文章管理显示全部栏目
				postData:{
					page: 1,
					pageSize: 8,
					title:'',
					status:'1',
					columnId: ''	//栏目ID
				},
				list: [],
				total: 0,
				activeItem:{}, // 操作中的数据
				deepLength: 1,
				pickerValueDefault: [2],
				pickerValueArray:[{
						label: '全部',
						value: ''
					},
					{
						label: '未发布',
						value: '0'
					},
					{
						label: '已发布',
						value: '1'
					}],
				loadingType: 0, //上拉的状态：0-loading前；1-loading中；2-没有更多了
				tabIndex: 0,	// 顶部选项卡默认选中
				tabBars: [{
                    name: '全部',
                    id: 'a'
                }],
				scrollInto: "",	// 值应为某子元素id（id不能以数字开头）
			}
		},
		computed: {
		    ...mapState(['userInfo','hasLogin']),
		},
		filters:{
			timeFilter(val){
				return val.substring(0,10)
			}
		},
		onLoad(option) {
			if(option.id){	// 跳转指定模块
				this.isAll = false
				this.postData.columnId = option.id
				this.selectColumnInfo(option.id)
			}else{
				this.anLoad()
			}
			this.getList(1)
		},
		methods:{
			isEmpty,
			anLoad(){
				this.$api.getColumn().then(res=>{	// 查询全部栏目
					let nd = [{
						id: 'a',
						name: '全部',
					}]
					if(!isEmpty(res)){
						 res.forEach(item => {
						    nd.push({
								id: 'a' + item.id,	// scrollInto不能用数字开头  
								name: item.name.substring(0,2),	// 截取前两个字符
								level: parseInt(item.level) 
							})    
						 });
					}
					this.tabBars = nd
				})
			},
			selectColumnInfo(id){	// 查询文章栏目详情
				this.$api.selectColumn({id:id}).then(res=>{
					if(!isEmpty(res)){
						uni.setNavigationBarTitle({
							title: res.name
						})
					}
				})
			},
			onReachBottom() {	// 页面到底 触发
				if (this.loadingType !== 0) {
					return;
				}
				if(Math.ceil(this.total/this.postData.pageSize)>this.postData.page && this.total != 0 ){
					this.postData.page += 1
					this.getList()
				}else{
					this.loadingType = 2
				}
			},
			ontabtap(e) {	// 顶部选项卡点击
			    let index = e.target.dataset.current || e.currentTarget.dataset.current;
			    this.switchTab(index);
			},
			switchTab(index) {	// 选项卡改变 
				if (this.tabIndex === index) {
				    return;
				}
				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;
				try{
					let tageId = this.scrollInto.split('a')[1]	// 减去id前面的字母
					this.postData.columnId = tageId
				}catch(e){}
				this.getList(1)
			},
			getList(page){	// 获取信息接口数据
				this.loadingType = 1
				if(page){
					this.postData.page = page
				}
				if(this.postData.page === 1){
					this.list = []
				}
				this.$api.SelectArticleList(this.postData).then(res=>{
					this.loadingType = 0
					this.list.push(...res.list); 
					this.total = res.total
					this.changeLoading()
				})
			},
			changeLoading(){	// 更新加载组件状态
				if(this.total === 0 || Math.ceil(this.total/this.postData.pageSize)<=this.postData.page){
					this.loadingType = 2
				}
			},
			change(e) {	//翻页
				this.getList(e.current)
			},
			clickList(item){	//列表长按
				if(this.userInfo.grade == 3 && this.isAll ){	//超级管理员  并且为文章管理界面
					this.activeItem = item
					this.togglePopup(true)
				}
			},
			clickStatus(e){	// 发布 按钮触发
				let status = e.target.value?"1":"0"
				let nd = {
					article_id: this.activeItem.article_id,
					status: status
				}
				this.$api.updataState(nd).then(res=>{
					this.togglePopup(false)
					uni.showToast({title:'操作成功', icon:"success"});
				})
			},
			clickTop(e){	// 置顶 按钮触发
				let isTop = e.target.value?"1":"0"
				let nd = {
					article_id: this.activeItem.article_id,
					isTop: isTop
				}
				this.$api.updataState(nd).then(res=>{
					this.togglePopup(false)
					uni.showToast({title:'操作成功', icon:"success"});
				})
			},
			deleteInfo(){	// 删除按钮触发
				let nd = {
					ids: this.activeItem.article_id
				}
				this.$api.deleteArticle(nd).then(res=>{
					this.togglePopup(false)
					uni.showToast({title:'操作成功', icon:"success"});
					setTimeout(()=>{
						this.getList(1)
					},1000)
				})
			},
			gotoInfo(item){	// 跳转至详情页
				let detail = {
					article_column_id: item.article_column_id,
					article_id: item.article_id,
					is_top: item.is_top,
					release_status: item.release_status,
					thumbnail: item.thumbnail,
					title: item.title,
					updata_time: item.updata_time,
				}
				uni.navigateTo({
					url: "../article/articleInfo?detailDate=" + encodeURIComponent(JSON.stringify(detail))
				})
			},
			selectState(){	// 筛选
				if(this.hasLogin){	//登录用户可操作
					this.$refs.mpvuePicker.show()
				}else{
					uni.showToast({title:'请先登录', icon:"none"});
				}
			},
			shueBtn(){	// 筛选 确定
				this.closeRightDrawer()
				this.getList(1)
			},
			search(){	// 搜索
				this.getList(1)
			},
			back(){
				uni.switchTab({
					url: '../main/main'
				});
				/* uni.navigateBack({
					delta: 1
				}); */
			},
			
			togglePopup(type) {	// 弹框关闭或打开
				if(type){
					this.$refs.popup.open()
				}else{
					this.$refs.popup.close()
				}
				
			},
			onCancel(e) {	//级联选择器 取消选择
				//console.log(e)
			},
			onConfirm(e) {	// 级联选择器 确定
				this.postData.status = e.value[0]
				this.getList(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.an-sysarticle{
		width:100%;
		.uni-list{
			margin-bottom: 15px;
		}
		.uni-media-list-logo{
			width: 180upx;
			height: 140upx;
			background-color: #eeeeee;
		}
		.uni-media-list-body{
			height: auto;
			.uni-media-list-text-top{
				height: 74upx;
				font-size: 15px;
				overflow: hidden;
			}
		}
		.uni-padding-wrap{
			uni-button{
				margin-bottom: 15px;
			}
		}
		
		.an-nav-drawer{
			.uni-list-cell{
				justify-content: flex-start;
			}
		}
		.uni-media-list-text-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}
	
	.input-view {
		width: 92%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
	}
	
	.input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}
</style>
<style lang="scss">
	.an-sysarticle{

		.scroll-h {
			width: 750upx;
			height: 80upx;
			flex-direction: row;
			background-color: #FFFFFF;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
			/* flex-wrap: nowrap; */
			/* border-color: #cccccc;
			border-bottom-style: solid;
			border-bottom-width: 1px; */
		}
		
		.uni-tab-item {
			/* #ifndef APP-PLUS */
			display: inline-block;
			/* #endif */
			flex-wrap: nowrap;
			padding-left: 34upx;
			padding-right: 34upx;
		}
		
		.uni-tab-item-title {
			color: #555;
			font-size: 30upx;
			height: 80upx;
			line-height: 80upx;
			flex-wrap: nowrap;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
		}
		
		.uni-tab-item-title-active {
			color: #007AFF;
		}
	}
</style>

